<template>
	<view class="item-block">
		<view class="header" v-if='userInfo.avatarUrl'>
			<view class="header_left">
				<view class="header_avatar">
					<u-avatar :src="userInfo.avatarUrl" size="70"></u-avatar>
				</view>
				<view class="header_name">
					<view class="name_detail">
						<view class="name">
							{{userInfo.nickName}}
						</view>
						<view class="name_img">
						</view>
					</view>
					<view class="name_type">

						{{userInfo.userType==0?'普通会员':''}}
						{{userInfo.userType==1?'初级会员':''}}
						{{userInfo.userType==2?'中级会员':''}}
						{{userInfo.userType==3?'高级会员':''}}
					</view>
				</view>
			</view>
			<view class="header_right">
				<view class="iconfont icon-shezhi" @click="detailedit">

				</view>
				<!-- <view class="right_but">
					<u-button type="primary" text="充值"></u-button>
				</view> -->
			</view>
		</view>
		<view class="header_not" v-else @click="login">
			<view class="">
				<u-avatar :src="userInfo.avatarUrl" size="70"></u-avatar>
			</view>
			<view class="notlog">
				点击登录
			</view>
		</view>
		<view class="centen">
			<view class="num">
				<view class="item">
					<view class="digit">
						{{userInfo.pointsNum?userInfo.pointsNum:0}}
					</view>
					<view class="text">
						积分
					</view>
				</view>
				<view class="item">
					<view class="digit">
						<span style="font-size: 14px;">¥</span>{{userInfo.balance?userInfo.balance:0}}
					</view>
					<view class="text">
						余额
					</view>
				</view>
				<view class="item" @click="participate">
					<view class="digit">
						{{userInfo.joinNum?userInfo.joinNum:0}}
					</view>
					<view class="text">
						参与次数
					</view>
				</view>
			</view>
			<view class="module" v-if="activetype==1">
				<view class="module_one" v-for="(item, index) in modulejson">
					<view class="module_title">
						{{item.title}}
					</view>
					<view class="module_item">
						<view class="item_one" v-for="(obj, objindex) in item.list" :key="objindex"
							@click="mydetail(obj.id)">
							<view class="iconfont" :class="obj.icon" :style="{ opacity: obj.show ? 1 : 0 }">

							</view>
							<view class="module_text" :style="{ opacity: obj.show ? 1 : 0 }">
								{{obj.name}}
							</view>
						</view>

					</view>
				</view>
			</view>

		</view>
		<layout></layout>
		<loginpage ref="loginst" @refresh='refreshinfo'></loginpage>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script scoped>
	import loginpage from '../../pages/layout/login_page.vue'
	import layout from '../../pages/layout/layout.vue'
	export default {
		props: {},
		components: {
			layout,
			loginpage
		},
		data() {
			return {
				activetype: 1,
				userInfo: {

				},
				modulejson: [{
						title: "我的订单",
						list: [{
								id: 1,
								icon: 'icon-daifukuan3',
								name: '待付款',
								show: true,
							},
							{
								id: 2,
								icon: 'icon-maijiayifahuolv',
								name: '待收货',
								show: true,
							},
							{
								id: 3,
								icon: 'icon-yifahuo',
								name: '已发货',
								show: true,
							},
							{
								id: 4,
								icon: 'icon-quanbudingdan',
								name: '全部',
								show: true,
							}
						]
					},
					{
						title: "我的赛事",
						list: [{
								id: 5,
								icon: 'icon-canyu',
								name: '未完成',
								show: true,
							},
							{
								id: 6,
								icon: 'icon-yiwancheng',
								name: '已完成',
								show: true,
							},
							{
								id: 11,
								icon: 'icon-erweima1',
								name: '核销码',
								show: true,

							},
							{
								id: 12,
								icon: 'icon-dingdan',
								name: '赛事订单',
								show: true,
							}
						]
					},
					{
						title: "功能服务",
						list: [{
								id: 7,
								icon: 'icon-jishoujiechu',
								name: '寄售',
								show: true,
							},
							{
								id: 8,
								icon: 'icon-jianyanjianding',
								name: '鉴定',
								show: true,
							},
							{
								id: 9,
								icon: 'icon-dizhiguanli',
								name: '地址管理',
								show: true,
							},
							{
								id: 10,
								icon: 'icon-kefu',
								name: '客服',
								show: true,
							}
						]
					}
				],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
			}
		},
		onLoad(options) {
			this.infodetail()
		},
		computed: {},
		watch: {},
		created() {
			//从本地同步拿到用户详细信息
			this.userInfo = uni.getStorageSync('userinfokey')
			this.activefn()
		},
		mounted() {
			// this.userInfo = uni.getStorageSync('userinfokey')
			uni.$emit('update', {
				active: 4
			}) // 触发事件并传递参数	
		},
		methods: {
			//这个方法用来隐藏模块,方便发布小程序
			activefn() {
				const that = this
				this.$request(`/race/getPlanState`, 'get')
					.then(
						res => {
							that.activetype = res.data.data
						})
			},
			refreshinfo(e) {
				// e是在调用子组件时传递的参数用来区分父组件
				if (e == 1) {
					//从本地同步拿到用户详细信息
					this.userInfo = uni.getStorageSync('userinfokey')
					this.infodetail()
				}

			},
			// 用户信息请求
			infodetail() {
				const that = this
				this.$request(`/mine/memberInfo`, 'get')
					.then(
						res => {
							that.userInfo.pointsNum = res.data.data.pointsNum
							that.userInfo.balance = res.data.data.balance
							that.userInfo.joinNum = res.data.data.joinNum
						})

			},
			participate() {
				const userinfo = uni.getStorageSync('userinfokey')
				if (!userinfo.token) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请先登录",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

					})
					return
				}
				uni.navigateTo({
					url: '/subpackage1/myhome/my_event?id=' + encodeURIComponent('')
				});
			},
			detailedit() {
				uni.navigateTo({
					url: '/subpackage1/myhome/my-detail'
				});
			},
			showToast() {
				this.$refs.uToast.show({
					type: 'warning',
					message: "此模块暂未开放",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

				})
			},

			mydetail(e) {
				const userinfo = uni.getStorageSync('userinfokey')
				if (!userinfo.token) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请先登录",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

					})
					return
				}
				if (e == 5 || e == 6) {
					if (e == 5) {
						uni.navigateTo({
							url: '/subpackage1/myhome/my_event?id=' + encodeURIComponent(0)
						});
					} else {
						uni.navigateTo({
							url: '/subpackage1/myhome/my_event?id=' + encodeURIComponent(1)
						});
					}
				} else if (e == 10) {
					this.iphone()
				} else if (e == 11) {
					uni.navigateTo({
						url: '/subpackage1/myhome/my_writeoff'
					});
				} else if (e == 12) {
					uni.navigateTo({
						url: '/subpackage1/myhome/event_order'
					});
				} else {
					this.showToast()
					return
				}
			},
			iphone() {
				uni.makePhoneCall({
					phoneNumber: '1508102' //仅为示例
				});
			},
			//处理登录事件
			login() {
				const that = this;
				// that.$refs.uToast.show({
				// 	type: 'loading',
				// 	title: '正在加载',
				// 	message: "正在加载",
				// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'

				// })
				that.userInfo = uni.getStorageSync('userinfokey')
				//判断是否有token如果有当再次点击头像跳转到详情页
				if (that.userInfo.token) {
					// console.log('已存在token，无需执行uni-login');
					return;
				}
				that.$refs.loginst.login(1)
				// // 登录api进行登录
				// uni.login({
				// 	provider: 'weixin',
				// 	success: res => {
				// 		// 用户唯一code码
				// 		const code = res.code
				// 		// 获取用户信息
				// 		uni.getUserInfo({
				// 			provider: 'weixin',
				// 			success: res => {
				// 				that.userInfo = res.userInfo

				// 				// 拿到用户信息进行存储
				// 				const data = {
				// 					code: code,
				// 					nickName: res.userInfo.nickName,
				// 					avatarUrl: res.userInfo.avatarUrl,
				// 				}
				// 				//发送请求将用户信息存储后台
				// 				that.$request(`/wechat/getAccountByCode`, 'post', data)
				// 					.then(
				// 						res => {
				// 							const dataobj = {
				// 								token: res.data.data.token,
				// 								// ...res.data.data.user
				// 							}
				// 							that.userInfo = dataobj
				// 							// console.log(that.userInfo);
				// 							// 将用户信息和token存储到本地
				// 							uni.setStorage({
				// 								key: 'userinfokey',
				// 								data: dataobj,
				// 								success: function() {
				// 									that.$request(`/mine/memberInfo`,
				// 											'get')
				// 										.then(
				// 											objs => {
				// 												const userdetail = {
				// 													...dataobj,
				// 													...objs.data
				// 													.data
				// 												}
				// 												that.userInfo =
				// 													userdetail
				// 												uni.setStorage({
				// 													key: 'userinfokey',
				// 													data: userdetail,
				// 													success: function() {
				// 														console
				// 															.log(
				// 																'存储用户信息成功2'
				// 															);
				// 													}
				// 												});
				// 												uni.showToast({
				// 													title: '登录成功',
				// 												})

				// 											})
				// 								}
				// 							});








				// 						})
				// 			},
				// 			fail: err => {
				// 				console.error('获取用户信息失败！' + JSON.stringify(err))
				// 			}
				// 		})
				// 	},
				// 	fail: err => {
				// 		console.error(JSON.stringify(err))
				// 	}
				// })

			},

		}
	}
</script>

<style scoped lang="scss">
	.item-block {
		background-color: #1e1e1e;
		height: 100vh;

		.header_not {
			height: 150px;
			padding-left: 30px;
			padding-right: 20px;
			display: flex;
			align-items: center;

			.notlog {
				margin-left: 20px;
				font-size: 20px;
				color: #de3600;
				font-weight: 600;
			}
		}

		.header {
			height: 150px;
			display: flex;
			align-items: center;
			// padding: 0 20px;
			padding-left: 30px;
			padding-right: 20px;
			justify-content: space-between;



			.header_left {
				display: flex;
				align-items: center;

				.header_avatar {
					height: 70px;
					width: 70px;
				}

				.header_name {
					margin-left: 10px;

					.name_detail {
						display: flex;
						align-items: center;

						.name {
							font-size: 20px;
							color: #f6f7f9;
						}

						.name_img {
							margin-left: 10px;
							height: 15px;
							width: 45px;
							background-size: 100% 100%;
							background-image: url('https://web.ptgolf.net/image/webchat/3.png');
						}
					}

					.name_type {
						font-size: 12px;
						color: #a5a5a5;
					}
				}
			}


			.header_right {
				height: 80px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;

				.icon-shezhi {
					color: #f6f7f9;
					font-size: 35px;
				}

				.right_but {
					::v-deep .u-button {
						border: 0px;
						background-color: #de3600;
						height: 30px;
						width: 90px;
						line-height: 30px;
						border-radius: 20px;
					}
				}
			}
		}

		.centen {
			height: calc(100vh - 150px - 75px);
			background-color: #f4f4f4;
			border-radius: 15px 15px 0 0;
			background-image: url('https://web.ptgolf.net/image/webchat/4.png');
			background-size: 100% 100%;

			.num {
				display: flex;
				justify-content: space-around;
				height: 70px;
				align-items: center;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.digit {
						font-size: 21px;
						font-weight: 600;
						color: #de3600;
					}

					.text {
						font-size: 12px;
					}
				}
			}

			.module {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 20px;

				.module_one {
					width: calc(100% - 20px);
					height: 70px;
					padding: 10px;
					border-radius: 10px;
					background-color: #fff;
					margin-bottom: 10px;

					.module_title {
						font-size: 14px;
						font-weight: 600;
						margin-bottom: 5px;
					}

					.module_item {
						display: flex;
						padding: 0 15px;
						justify-content: space-between;

						.item_one {
							display: flex;
							flex-direction: column;
							align-items: center;

							.icon-daifukuan3,
							.icon-quanbudingdan,
							.icon-canyu,
							.icon-jishoujiechu {
								font-size: 30px;

							}

							.icon-erweima1,
							.icon-dingdan {
								font-size: 28px;
								margin-bottom: 2px;
							}

							.icon-kefu,
							.icon-jianyanjianding,
							.icon-dizhiguanli {
								font-size: 28px;
								margin-bottom: 2px;
							}

							.icon-maijiayifahuolv {
								font-size: 28px;
								margin-bottom: 2px;
								transform: scaleX(-1);
							}

							.icon-yifahuo {
								font-size: 26px;
								margin-bottom: 4px;
							}

							.icon-yiwancheng {
								font-size: 25px;
								margin-bottom: 4px;

							}

							.module_text {
								font-size: 11px;
							}
						}
					}
				}
			}

		}
	}
</style>